@import 'common';
header{
    height: 4.986667rem;
    width: 100%;
    background: url(../images/banner-bg.jpg) no-repeat center center;
    background-size: 100% 100%;
    // 搜索区域
    .search-box{
        position: fixed;
        top: 0;
        left: 0;
        // background-color: #E43130;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        z-index: 9;
        .left{
            // width: 40px;
            // height: 44px;
            // background: url(../images/tip-bg.png) no-repeat 10px 12px;
            // background-size: 20px auto;
            width: 1.066667rem;
            height: 1.173333rem;
            background: url(../images/tip-bg.png) no-repeat 0.266667rem 0.32rem;
            background-size: 0.533333rem auto;
        }
        .search-input{
            position: relative;
            flex: 1;
            height: 0.8rem;
            margin-top: 0.186667rem;
            background-color: #fff;
            border-radius: 0.4rem;
            .jd-icon{
                float: left;
                display: block;
                width: 0.533333rem;
                height: 0.4rem;
                margin: 0.213333rem 0.213333rem 0 0.4rem;
                background: url(../images/jd.png) no-repeat center center;
                background-size: 100% 100%;
            }
            .line{
                float: left;
                display:block;
                width: 0.026667rem;
                height: 0.426667rem;
                background-color: #DDDDDD;
                margin-top: 7px;
    
            }
            .searchIcon{
                float: left;
                display: block;
                width: 0.48rem;
                height: 0.4rem;
                margin: 0.213333rem 0 0 0.133333rem;
                background: url(../images/jd-sprites.png) no-repeat -2.213333rem 0;
                background-size: 5.333333rem auto;
            }
            .ipt{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 0.8rem;
                line-height: 0.8rem;
                padding-left: 1.813333rem;
                padding-right: 0.266667rem;
                font-size: 0.32rem;
                overflow: hidden;
                box-sizing: border-box;
                border-radius: 0.4rem;
                input{
                    border: none;
                    padding-left: 0.133333rem;
                    margin-left: 0.133333rem;
                    outline: none;
                }
            }
        }
        .login{
            width: 1.066667rem;
            margin: 0.266667rem 0;
            color: #fff;
            text-align: center;
            font-size: 0.373333rem;
        }
        
    }
    // 焦点图区域
    .focus{
      padding-top: 1.173333rem;
      border-radius: 0.213333rem;
      overflow: hidden;
      .focusList{
          position: relative;
          width: 90%;  
          height: 3.733333rem;
          margin:0 5%;
          border-radius: 0.213333rem;
          overflow: hidden;
          .focusPic{
            a{
                float: left;
                width: 100%;
                height: 3.733333rem;
                display: block;
                 img{
                    width: 100%;
                    height: 3.733333rem;
                 }
              }
          }
          .circle{
              position: absolute;
              bottom: 0.133333rem;
              left: 50%;
              transform: translateX(-50%);
              li{
                  float: left;
                  width: 0.133333rem;
                  height: 0.133333rem;
                  border-radius: 50%;
                  background-color: #fff;
                  margin: 0 0.053333rem;
              }
              .current{
                  background-color:#FA2C19 ;
              }
          }
         
          
      }
    }
}
// 11.11主会场
.store{
    height: 3.84rem;
    width: 100%;
    display: flex;
    justify-content:flex-start;
    .content{
        height: 3.84rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        a{
            position: relative;
            display: block;
            width: 100%;
            height: 1.92rem;
            img{
              position: absolute;
              top: 6%;
              width: 70%;
              margin-left: 15%;
              height: 65%;
              border-radius: 0.133333rem;
            }
            p{  
                position: absolute;
                bottom: 4%;
                left: 50%;
                transform: translateX(-50%);
                color: #fff;
                font-size: 0.32rem;
                white-space: nowrap; 
                overflow: hidden;  
                text-overflow: ellipsis; 
            }
        }
        a:nth-child(1){
            background: url(../images/11-bg01.dpg) no-repeat center center;
            background-size: 100% 100%;
        }
        a:nth-child(2){
            background: url(../images/11-bg02.dpg) no-repeat center center;
            background-size: 100% 100%;
            img{
                top: 0.186667rem;
            }
            p{
                bottom: 2%;
            }
        }
    }
    .content:nth-child(2){
        flex: 2.283;
        a:nth-child(1){
            position: relative;
            height: 3.84rem;
            background: url(../images/11-bg03.gif) no-repeat center center;
            background-size: 100% 100%;
            img{
                position: absolute;
                width: 43%;
                height: 60%;
                margin: 0 !important;
            }
            img:nth-child(1){
                left: 6%;
                top: 20%;
            }
            img:nth-child(2){
                right: 6%;
                top: 20%;
            }
        }
    }
}
//导航部分
nav{
    position: relative;
    width: 100%;
    height: 4.32rem;
    background-image:linear-gradient(to bottom, #B92D3A,#EF6536);   
    .nav-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        a{
            display: block;
            width: 20%;
            height: 1.973333rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                margin-top: 0.266667rem;
                width: 1.066667rem;
                height: 1.066667rem;
            }
            p{
               color: #fff;
               font-size: 0.32rem; 
               margin-top: 0.16rem;
            }
        }
    }
    .nav-cicle{
        position: absolute;
        bottom: 0.08rem;
        left: 50%;
        transform: translateX(-50%);
        li{
            float: left;
            width: 0.133333rem;
            height: 0.133333rem;
            border-radius: 50%;
            background-color: #CCCCCC;
            margin: 0 0.053333rem;
        }
        .current{
            background-color:#FA2C19;
        }
    }
    
}
//主体部分
main{
    background-color: #EF6536;
    // 正品区域
    .quality{
      margin:0 5%;
      width: 90%;
      height: 3.466667rem;
      display: flex;
      justify-content: flex-start;
      a{
          display: block;
          width: 25%;
          height: 3.2rem;
          padding: 0.173333rem 0  0.133333rem 0.266667rem ;
          background-color: #fff;
          color: #222;
          box-sizing: border-box;
          margin-right: 0.026667rem;
            p:nth-child(1){
                height: 0.586667rem;
                font-weight: 700;
                font-size: 0.426667rem;
              }
              p:nth-child(2){
                font-size: 0.32rem;
              }
          img{
              width: 1.6rem;
              height: 1.6rem;
          }
      }
    }
    //京东秒杀
    .seckill{
        margin:0.266667rem 5%;
        width: 90%;
        height: 3.706667rem;
        background-color: #fff;
        border-radius: 0.32rem;
        box-sizing: border-box;
        overflow: hidden;
        .top{
            height: 0.906667rem;
            background: url(../images/seckill.png) no-repeat;
            background-size: contain;
            display: flex;
            justify-content: space-between;
            align-items: center;
         .top-l{
             display: flex;
             justify-content: flex-start;
             .jd-sk{
                 margin-left: 0.266667rem;
                 margin-right: 0.133333rem;
                 font-size: 0.373333rem;
                 color: #333;
             }
             .hour{
                 padding-left: 0.133333rem;
                 color: #ff2727;
                 font-size: 0.346667rem;
                 &::after{
                     display: inline-block;
                     content:'';
                     width: 0.546667rem;
                     height:0.466667rem ;
                     background: url(../images/time.png) no-repeat;
                     background-size:100% 100%;
                     vertical-align: middle;
                    }
             }
             .seckill-time{
                display: flex;
                justify-content: flex-start;
                margin-left: 0.133333rem;
                .h{
                    width: 0.4rem;
                    height: 0.48rem;
                    font-size: 0.32rem;
                    background-image:linear-gradient(-140deg,#ff6152,#fa2c19);
                    color: #fff;
                    
                }
                span{
                    color: #f2270c;
                    font-weight: 700;
                    font-size: 12px;
                    margin: 0 2px;
                }
             }
         }
         .top-r{
             font-size: 0.32rem;
             color: #f23030;
           span{
               display: inline-block;
               width: 0.293333rem;
               height: 0.293333rem;
               background: url(../images/more-icon.png) no-repeat;
               background-size: 100% 100%;      
               margin-right: 0.133333rem; 
           }
        }
        }
        .seckill-content{
            height: 2.773333rem;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            .seckill-item{
              flex: 1;
              a{
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  img{
                      width: 1.466667rem;
                      height: 1.466667rem;
                  }
                  p:nth-child(2){
                      font-size: 0.346667rem;
                      color: #f22700;
                      font-weight: 700;
                      margin-top: 0.266667rem;
                  }
                  p:nth-child(3){
                      font-size: 0.32rem;
                      text-decoration: line-through;
                      color: #666;
                  }
              }
            }
        }
    }
    // 精心推荐
    .recommend{
      margin: 0 5%;
      width: 90%;
      .recommendList{
        width: 100%;
        height: 3.466667rem;
        display: flex;
        justify-content: flex-start; 
        .recommendItem{
            flex: 1;
            margin-right: 0.053333rem;
            display: block;
            width: 100%;
            height: 3.2rem;
            background: url(../images/recommend-bg01.dpg) no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #7842f2;
            img{
                width: 1.733333rem;
                height: 1.733333rem;
             
            }
            p:nth-child(2){
                margin-top: 0.08rem;
                font-size: 14px;
            }
            p:nth-child(3){
                font-size: 12px;

            }
        }
        .recommendItem:nth-child(2){
            background: url(../images/recommend-bg02.dpg) no-repeat;
            background-size: 100% 100%;
            color: #f32d46;
        }
        .recommendItem:nth-child(3){
            background: url(../images/recommend-bg03.dpg) no-repeat;
            background-size: 100% 100%;
            color: #316af2;
        }
        .recommendItem:nth-child(4){
            background: url(../images/recommend-bg04.dpg) no-repeat;
            background-size: 100% 100%;
            color: #f8591a;
        }
        .recommendItem:last-child{
            margin-right: 0;
        }
      }
    }
    //11.11精选会场
    .selection{
        background-color: #F6F6F6;
      .selection-title{
        margin-bottom: 0.133333rem;
        height: 0.933333rem;
        background: url(../images/selection-bg.dpg) no-repeat;
        background-size:contain ;
      }
      .selection-content{
          width: 90%;
          margin: 0 5%;
          display: flex;
          justify-content: flex-start;
         .pic{
            flex: 1;
            width: 100%;
            height: 2.24rem;
            img{
             width: 100%;
             height: 2.24rem;
            }
          }
          .pic:nth-child(2){
            flex: 1.12;
            margin: 0 0.049067rem;
            height: 2.506667rem;
            img{
             width: 100%;
             height: 2.506667rem;
             margin-top: -0.133333rem;
            }
         }
          
          
      }
    }
    //东家小院
    .courtyard{
        background-color:#F6F6F6;
        .courtyard-title{
            height: 0.933333rem;
            background: url(../images/courtyard-bg.dpg) center center;
            background-size: contain;
        } 
        .courtyard-content{
           width: 90%;
           height: 6.4rem;
           margin: 0 5%;
           background-color: #fff;
           box-sizing: border-box;
         .courtyard-top{
             height: 3.2rem;
             border-bottom: 2px solid #F5F5F5;
             display: flex;
             a{  
                 display: block;
                 width: 50%;
                 height: 100%;
                 border-right: 1px solid #F5F5F5;
                 padding-left: 0.266667rem;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 p:nth-child(1){
                   font-size: 0.426667rem;
                   font-weight: 700;
                   color: #2793FD;
                 }
                 p:nth-child(2){
                    font-size: 0.32rem;
                    color: #666771;
                  }
                div{
                    display: flex;
                    justify-content: center;
                    img{
                        width: 1.6rem;
                        height: 1.6rem;
                        margin: 0.133333rem 0.186667rem 0;
                    }
                }
             }
             a:nth-child(2){
                 border-right: none;
             }
         }
         .courtyard-bottom{
             height: 3.2rem;
             display: flex;
             justify-content: flex-start;
             a{
                flex: 1;
                height: 100%;
                border-right: 1px solid #F5F5F5;
                padding: 0.16rem 0 0.133333rem 0.266667rem;
                box-sizing: border-box;
                p:nth-child(1){
                  color: #000;
                  font-weight: 700;
                  font-size: 0.426667rem;
                }
                p:nth-child(2){
                    color: #666771;
                    font-size: 0.32rem;
                }
                div{
                    display: flex;
                    justify-content: center;
                    img{
                        width: 1.6rem;
                        height: 1.6rem;
                        margin-left: -0.266667rem;
                    }
                }
             }
             a:last-child{
                 border-right: none;
             }
         }
        }  
    }
    //为你推荐
    .recommendforYou{
        background-color: #F7F7F7;
        .top-bg{
            height: 0.933333rem;
            background: url(../images/recommendforyou-bg.png) no-repeat;
            background-size: contain;
        }
        .recommendProduct{
            width: 90%;
            margin: 0 5%;
            margin-bottom: 1.333333rem;
            ul{
              width: 100%;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              li{
                  width: 49%;
                  background-color: #fff;
                  border-radius: 0.213333rem;
                  margin-bottom: 0.266667rem;
                  overflow: hidden;
                  img{
                      width: 100%;
                      height: 4.613333rem;
                  }
                  .des{
                      height: 0.853333rem;
                      padding: 0 0.106667rem;
                    //   margin-top: 0.133333rem;
                      margin-bottom: 0.08rem;
                      font-size: 0.346667rem;
                      overflow: hidden;
                      text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 2;
                     font-size: 0.32rem;
                     color: #1A1A1A;
                      span:nth-child(1){
                          display: inline-block;
                          width: 0.52rem;
                          height: 0.346667rem;
                          margin-right: 0.106667rem;
                          background: url(../images/11.11.webp) no-repeat;
                          background-size: contain;
                      }
                      span:nth-child(2){
                        display: inline-block;
                        width: 0.52rem;
                        height: 0.346667rem;
                        margin-right: 0.106667rem;
                        background: url(../images/zy.png) no-repeat;
                        background-size: contain;
                    }
                  }
                  .price{
                      height: 0.693333rem;
                      display: flex;
                      justify-content: space-between;
                      .p-l{
                        display: flex;  
                        justify-content: flex-start;
                        span:nth-child(1){
                            font-size: 0.426667rem;
                            color: #fa2c19;
                            padding-left: 0.106667rem;
                            padding-right: 0.133333rem;
                            i{
                               font-size: 0.346667rem; 
                               font-style: normal;
                               margin-left: -0.08rem;
                            }
                        }
                        span:nth-child(2){
                            height: 0.373333rem;
                            line-height: 0.373333rem;
                            padding: 0 0.08rem;
                            border:1px solid #fa2c19 ;
                            font-size: 0.32rem;
                            color: #fa2c19;
                            margin-right: 0.106667rem;
                            margin-top: 0.08rem;
                        }
                      }
                      .p-r{
                          width: 1.226667rem;
                          height: 0.586667rem;
                          line-height: 0.586667rem;
                          padding: 0 0.133333rem;
                          border-radius: 0.293333rem;
                          border-top-right-radius:0;
                          box-sizing: border-box;
                          color: #808080;
                          font-size: 0.32rem;
                          background-color: #F0F2F5;
                      }
                  }
                  .footer{
                      height: 0.64rem;
                      background-color: #fff;
                  }
              }
            }
        }
    }
}
 //footer
 footer{
     position: fixed;
     bottom: 0;
     left: 0;
     height: 1.226667rem;
     width: 100%;
     background-color: #fff;
     display: flex;
     justify-content: flex-start;
     .footerItem{
         flex: 1;
         width: 100%;
         height: 1.226667rem;
         background: url(../images/footer01.png) no-repeat ;
         background-size: contain;
     }
     .footerItem:nth-child(2){
        background: url(../images/footer02.png) no-repeat ;
        background-size: contain;
     }
     .footerItem:nth-child(3){
        background: url(../images/footer03.png) no-repeat ;
        background-size: contain;
     }
     .footerItem:nth-child(4){
        background: url(../images/footer04.png) no-repeat ;
        background-size: contain;
     }
     .footerItem:nth-child(5){
        background: url(../images/footer05.png) no-repeat ;
        background-size: contain;
     }
 }
